<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import DoctorProfile from '../components/DoctorCard.vue'
import OtherAnswers from '../components/RelatedAnswers.vue'
import OtherDoctors from '../components/RelatedDoctors.vue'

const route = useRoute()
const question = ref<any>({})
const doctorAnswers = ref<any[]>([])
const otherDoctors = ref<any[]>([])

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
}

onMounted(async () => {
    try {
        const response = await axios.get(`http://127.0.0.1:8000/doctor/ask/${route.params.questionId}/`)
        question.value = response.data

        if (question.value.answers?.[0]?.doctor?.id) {
            const doctorId = question.value.answers[0].doctor.id
            const answersResponse = await axios.get(`http://127.0.0.1:8000/doctor/answerabc/0/${doctorId}/`)
            doctorAnswers.value = answersResponse.data.filter((answer: any) =>
                answer.question_name !== question.value.name
            ).slice(0, 5)

            const departmentId = question.value.answers[0].doctor.department_id
            const doctorsResponse = await axios.get(`http://127.0.0.1:8000/doctor/doctor/${departmentId}/`)
            otherDoctors.value = doctorsResponse.data.filter((doc: any) =>
                doc.id !== doctorId
            ).slice(0, 3)
        }
    } catch (error) {
        console.error('Error fetching data:', error)
    }
})
</script>

<template>
    <div class="page-container">
        <div class="main-content">
            <div v-if="question.answers?.length" class="doctor-section">
                <DoctorProfile :doctor="question.answers[0].doctor" />
            </div>

            <div class="qa-container">
                <div class="question-section">
                    <div class="content-header">
                        <img :src="question.avatar || '/default-avatar.png'" class="user-avatar" alt="用户头像">
                        <div class="header-content">
                            <h1 class="question-title">{{ question.name }}</h1>
                            <div class="question-meta">
                                <span class="view-count">浏览 {{ question.view_count }}</span>
                                <span class="created-time">{{ formatDate(question.created_time) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="question-content" v-html="question.content"></div>
                </div>

                <div v-if="question.answers?.length" class="answer-section">
                    <div class="content-header">
                        <img :src="question.answers[0].doctor.avatar" class="doctor-avatar" alt="医生头像">
                        <div class="header-content">
                            <div class="doctor-info">
                                <span class="doctor-name">{{ question.answers[0].doctor.name }}</span>
                                <span class="doctor-title">{{ question.answers[0].doctor.get_title_display }}</span>
                            </div>
                            <div class="answer-time">回答时间：{{ formatDate(question.answers[0].created_time) }}</div>
                        </div>
                    </div>
                    <div class="answer-content" v-html="question.answers[0].content"></div>
                    <div class="answer-footer">
                        <div class="like-count">
                            <span class="like-icon">👍</span>
                            {{ question.answers[0].like_count }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sidebar">
            <OtherAnswers :answers="doctorAnswers" />
            <OtherDoctors :doctors="otherDoctors" />
        </div>
    </div>
</template>

<style scoped>
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
}

.main-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.sidebar {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.content-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.user-avatar,
.doctor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.header-content {
    flex: 1;
}

.question-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.question-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.question-meta {
    color: #666;
    font-size: 14px;
}

.question-meta span {
    margin-right: 16px;
}

.doctor-info {
    margin-bottom: 4px;
}

.doctor-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-right: 8px;
}

.doctor-title {
    font-size: 14px;
    color: #666;
}

.answer-time {
    font-size: 14px;
    color: #666;
}

.question-content,
.answer-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    padding-left: 64px;
}

.question-content :deep(p),
.answer-content :deep(p) {
    margin-bottom: 16px;
}

.question-content :deep(img),
.answer-content :deep(img) {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
}

.question-content :deep(a),
.answer-content :deep(a) {
    color: #00b96b;
    text-decoration: none;
}

.question-content :deep(a:hover),
.answer-content :deep(a:hover) {
    text-decoration: underline;
}

.answer-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 64px;
    margin-top: 16px;
}

.like-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.like-count:hover {
    background-color: #f5f5f5;
}

.like-icon {
    font-size: 16px;
}
</style>